import React, { useState, createRef } from "react"
import {
  Table,
  Modal,
  Form,
  Tree,
  Radio,
  Checkbox,
  Input,
  InputNumber,
  FormInstance,
  Space
} from "antd"
import { TableToolbar } from "app/components"
import { dataSource, options, treeData } from "constants/mock"
import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  DownloadOutlined
} from "@ant-design/icons"

const ParamSettings: React.FC = () => {
  const componentProps = [
    {
      col: 5,
      key: "userName",
      type: "input",
      label: "参数名称",
      labelwidth: 90,
      placeholder: "请输入参数名称"
    },
    {
      col: 5,
      key: "userName",
      type: "input",
      label: "参数键名",
      labelwidth: 90,
      placeholder: "请输入参数键名"
    },
    {
      col: 5,
      key: "userName",
      type: "input",
      label: "系统内置",
      labelwidth: 90,
      placeholder: "请输入系统内置"
    },
    {
      col: 6,
      key: ["beginTime", "endTime"],
      label: "创建时间",
      labelwidth: 70,
      type: "rangePicker"
    }
  ]

  const columns = [
    {
      title: "参数主键",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "参数名称",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "参数键名",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "系统内置",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "备注",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "创建时间",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "操作",
      key: "action",
      width: 120,
      render: () => (
        <Space size="middle">
          <a>修改</a>
          <a>删除</a>
        </Space>
      )
    }
  ]

  const formRef = createRef<FormInstance>()
  const [form] = useState({ username: "4444" })
  const [modalConfig, setModalConfig] = useState({ title: "", visible: false })
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })

  const getList = () => {
    console.log("get")
  }

  const onSelectChange = (rowKeys) => {
    setSelectedRowKeys(rowKeys)
  }

  const onFinish = (values: any) => {
    console.log("Success:", values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo)
  }

  /** 功能按键* */
  const showModal = () => {
    setModalConfig({ title: "新增", visible: true })
  }

  const handleOk = () => {
    if (formRef.current) {
      console.log(formRef.current.submit())
      console.log(form)
    }
    // setModalConfig({ ...modalConfig, visible: false })
  }

  const handleCancel = () => {
    setModalConfig({ ...modalConfig, visible: false })
  }

  const buttonProps = [
    {
      label: "新增",
      icon: <PlusOutlined />,
      onClick: showModal
    },
    {
      label: "修改",
      icon: <EditOutlined />,
      onClick: () => console.log("edit")
    },
    {
      label: "删除",
      danger: true,
      icon: <DeleteOutlined />,
      onClick: () => console.log("delete")
    },
    {
      label: "导出",
      icon: <DownloadOutlined />,
      onClick: () => console.log("edit")
    },
    {
      label: "刷新状态",
      icon: <EditOutlined />,
      onClick: () => console.log("edit")
    }
  ]

  return (
    <div>
      <TableToolbar
        getList={getList}
        queryParams={queryParams}
        setQueryParams={setQueryParams}
        buttonProps={buttonProps}
        componentProps={componentProps}
      />
      <Table
        dataSource={dataSource}
        columns={columns}
        rowSelection={{
          selectedRowKeys,
          onChange: onSelectChange
        }}
      />

      {/* 新增修改/弹窗 */}
      <Modal
        title={`${modalConfig.title}角色`}
        visible={modalConfig.visible}
        destroyOnClose
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          ref={formRef}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          initialValues={form}
        >
          <Form.Item
            label="角色名称"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="权限字符"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="角色顺序"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <InputNumber style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item
            label="状态"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Radio.Group>
              <Radio value={1}>正常</Radio>
              <Radio value={2}>停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="权限状态"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Checkbox.Group options={options} />
            <div className="tree-border">
              <Tree
                checkable
                defaultExpandedKeys={["0-0-0", "0-0-1"]}
                defaultSelectedKeys={["0-0-0", "0-0-1"]}
                defaultCheckedKeys={["0-0-0", "0-0-1"]}
                treeData={treeData}
              />
            </div>
          </Form.Item>
          <Form.Item
            label="备注"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default ParamSettings
